import React, { useContext, useEffect, useState } from "react";
import {
  View,
  StyleSheet,
  SafeAreaView,
  FlatList,
  Text,
  Dimensions,
  Image,
  TouchableOpacity,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import InterviewContext from "../../context/interview/InterviewContext";
import LoadingBar from "../../components/InterView/LoadingBar";

const { width: DEVICE_WIDTH } = Dimensions.get("window");

const InterviewType = ({ navigation }) => {
  //判断role,查看是管理员还是调查员，点击每一项时跳转不同(interviewList,interviewListAdmin)
  const { isInterviewLoading, isInterviewError, interviewList } =
    useContext(InterviewContext);
  const [countArray, setCountArray] = useState([0, 0, 0, 0, 0, 0]);

  useEffect(() => {
    const count1 = interviewList.filter(
      (item) => item.type === "市级访谈"
    ).length;
    const count2 = interviewList.filter(
      (item) => item.type === "县级访谈"
    ).length;
    const count3 = interviewList.filter(
      (item) => item.type === "镇级访谈"
    ).length;
    const count4 = interviewList.filter(
      (item) => item.type === "村级访谈"
    ).length;
    const count5 = interviewList.filter(
      (item) => item.type === "对接会讲话"
    ).length;
    const count6 = interviewList.filter(
      (item) => item.type === "安置点访谈"
    ).length;
    let countarray = new Array(count1, count2, count3, count4, count5, count6);
    setCountArray(countarray);
  }, [interviewList]);

  const DATA = [
    {
      count: countArray[0],
      title: "市级访谈",
    },
    {
      count: countArray[1],
      title: "县级访谈",
    },
    {
      count: countArray[2],
      title: "镇级访谈",
    },
    {
      count: countArray[3],
      title: "村级访谈",
    },
    {
      count: countArray[4],
      title: "对接会讲话",
    },
    {
      count: countArray[5],
      title: "安置点访谈",
    },
  ];

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        onPress={async () => {
          const role = await AsyncStorage.getItem("role");
          if (role == "user") {
            navigation.navigate("InterviewList", { type: item.title });
          } else {
            navigation.navigate("InterviewListAdmin", { type: item.title });
          }
        }}
      >
        <View style={styles.item}>
          <View style={styles.itemleft}>
            <Image
              style={styles.itemIcon}
              source={require("../../../assets/interview/folder.png")}
            />
            <View>
              <Text style={styles.itemTitle}>{item.title}</Text>
              <Text style={styles.itemCount}>
                {item.count}
                {"项"}
              </Text>
            </View>
          </View>
          <View>
            <AntDesign name="right" size={20} color="#c4c4c4" />
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <LoadingBar visible={isInterviewLoading} />
      {/* {isInterviewError && (
        <View>
          <View
            style={{
              position: "absolute",
              width: "100%",
              height: "100%",
              zIndex: 2,
              backgroundColor: "#a5a5a5",
              opacity: 0.2,
            }}
          ></View>
          <View
            style={{
              width: "100%",
              height: "100%",
              zIndex: 5,
            }}
          >
            <Text
              style={{
                fontSize: 17,
                alignSelf: "center",
                top: "50%",
                color: "#525252",
                fontWeight: "bold",
              }}
            >
              网络开小差了...
            </Text>
          </View>
        </View>
      )} */}
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.title}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
  },
  item: {
    height: 70,
    width: DEVICE_WIDTH,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
  },
  itemleft: {
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  itemIcon: {
    width: 50,
    height: 55,
    marginRight: 20,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 3,
  },
  itemCount: {
    fontSize: 14,
    color: "#888",
  },
});

export default InterviewType;
